$code-block
  margin: 0
  font-size: 14px
  background: #23241f
  padding: 15px 0
  overflow: auto
  color: #fff
  line-height: font-size * line-height

$line-numbers
  color: #666
  font-size: 0.85em

.article-entry
  pre, code
    font-family: font-mono
  code
    background: #f2f2f2
    padding: 0 0.3em
  pre
    @extend $code-block
    padding: 20px
    code
      background: none
      text-shadow: none
      padding: 0
    .highlight
      padding: 0
  .highlight
    @extend $code-block
    pre
      border: none
      margin: 0
      padding: 0 20px
    table
      margin: 0
      width: auto
    td
      border: none
      padding: 0
    figcaption
      clearfix()
      font-size: 0.85em
      color: highlight-comment
      line-height: 1em
      margin-bottom: 1em
      a
        float: right
    .gutter pre
      @extend $line-numbers
      text-align: right
    .line
      height: font-size * line-height
  .gist
    margin: 0
    padding: 15px 0
    .gist-file
      border: none
      font-family: font-mono
      margin: 0
      .gist-data
        background: none
        border: none
        .line-numbers
          @extend $line-numbers
          background: none
          border: none
          padding: 0 20px 0 0
        .line-data
          padding: 0 !important
      .highlight
        margin: 0
        padding: 0
        border: none
      .gist-meta
        background: highlight-background
        color: highlight-comment
        font: 0.85em font-sans
        text-shadow: 0 0
        padding: 0
        margin-top: 1em
        a
          @extend $link
          font-weight: normal
          &:hover
            text-decoration: underline

pre
  // Theme: monokai_sublime
  // More theme here: http://softwaremaniacs.org/media/soft/highlight/test.html.hljs,
  .tag,
  .css .rules,
  .css .value,
  .css .function
  .preprocessor,
  .pragma
    color: #f8f8f2;

  .strongemphasis,
  .strong,
  .emphasis
    color: #a8a8a2;

  .bullet,
  .blockquote,
  .horizontal_rule,
  .number,
  .regexp,
  .alias .keyword,
  .literal,
  .hexcolor
    color: #ae81ff;

  .tag .value,
  .code,
  .title,
  .css .class,
  .class .title:last-child
    color: #a6e22e;

  .link_url
    font-size: 80%;

  .strong,
  .strongemphasis
    font-weight: bold;

  .emphasis,
  .strongemphasis,
  .class .title:last-child
    font-style: italic;

  .keyword,
  .function,
  .change,
  .winutils,
  .flow,
  .nginx .title,
  .tex .special,
  .header,
  .attribute,
  .symbol,
  .symbol .string,
  .tag .title,
  .value,
  .alias .keyword:first-child,
  .css .tag,
  .css .unit,
  .css .important
    color: #f92672;

  .function .keyword,
  .class .keyword:first-child,
  .constant,
  .css .attribute
    color: #66d9ef;

  .variable,
  .params,
  .class .title
    color: #f8f8f2;

  .string,
  .css .id,
  .subst,
  .type,
  .ruby .class .parent,
  .built_in,
  .django .template_tag,
  .django .variable,
  .smalltalk .class,
  .django .filter .argument,
  .smalltalk .localvars,
  .smalltalk .array,
  .attr_selector,
  .pseudo,
  .addition,
  .stream,
  .envvar,
  .apache .tag,
  .apache .cbracket,
  .tex .command,
  .prompt,
  .link_label,
  .link_url
    color: #e6db74;

  .comment,
  .javadoc,
  .annotation,
  .decorator,
  .template_comment,
  .pi,
  .doctype,
  .deletion,
  .shebang,
  .apache .sqbracket,
  .tex .formula
    color: #75715e;

  .coffeescript .javascript,
  .javascript .xml,
  .tex .formula,
  .xml .javascript,
  .xml .vbscript,
  .xml .css,
  .xml .cdata,
  .xml .php,
  .php .xml
    opacity: 0.5;
